<script setup lang="ts">
import { Message, VideoCamera } from "@element-plus/icons-vue";
import { useHomeStore } from "@/stores/home/home";
import { ElMessage } from "element-plus";
import { ref, reactive } from "vue";
import { songDetail, simiSong, simiPlayList } from "@/api/song";
import { formatSongs, formatSongTime } from "@/utils/utils";
import { onBeforeRouteUpdate } from "vue-router";

const homeStore = useHomeStore();
const route = useRoute();
const info: any = reactive({
  songInfo: null, // 歌曲信息
  sId: 0, // 歌曲Id
  coverDesc: "", // 歌曲简介
  simiSong: [], // 相似音乐
  playlists: [], // 包含这首歌的歌单
  ommentType: 0, // 0: 歌曲 1: mv 2: 歌单 3: 专辑  4: 电台 5: 视频 6: 动态
});

const isLogin = computed(() => homeStore.isLogin);
const isPlayed = computed(() => homeStore.isPlayed);
const playList = computed(() => homeStore.playList);
const playIndex = computed(() => homeStore.playIndex);
const curSongInfo: any = computed(() => playList.value[playIndex.value]);

const isCurSong = computed(
  () => isPlayed.value && curSongInfo.value && curSongInfo.value.id === info.sId
);
// 当前播放状态
const playFontIcon = computed(() =>
  isCurSong.value ? "icon-audio-pause" : "icon-audio-play"
);
// 若是无版权获取vip歌曲 播放按钮置灰
const songDisable = computed(() =>
  info.songInfo.license || info.songInfo.vip ? "disable" : ""
);

// 获取歌曲详情
const getSongDetail = () => {
  songDetail(info.sId, new Date().valueOf()).then((res: any) => {
    // 是否有版权播放
    res.songs[0].license = !res.privileges[0].cp;
    info["songInfo"] = formatSongs(res.songs, res.privileges)[0];
    // 显示歌曲简介
    info["coverDesc"] = info["songInfo"].alia.join(" / ");
  });
};

// 获取相似音乐
const getSimiSong = async () => {
  await simiSong({ id: info.sId }).then((res: any) => {
    info["simiSong"] = res.songs.map((item: any) => {
      return {
        id: String(item.id),
        name: item.name,
        mvId: item.mvid,
        singer: item.artists,
        album: item.album,
        alia: item.alias,
        duration: formatSongTime(item.duration),
        url: `https://music.163.com/song/media/outer/url?id=${item.id}.mp3`,
        vip: item.fee === 1,
        license: item.license,
        publishTime: item.publishTime,
      };
    });
  });
};

// 包含这首歌的歌单
const getSimiPlayList = () => {
  simiPlayList({ id: info.sId }).then((res: any) => {
    info["playlists"] = res.playlists;
  });
};

const init = () => {
  info["sId"] = route.params.id;
  getSongDetail();
  getSimiSong();
  getSimiPlayList();
};
init();

// 播放音乐
const plyaing = (params: any) => {
  // 若当前唔歌曲 或者 当前播放歌曲不是本页显示的歌曲  立即播放当前页面歌曲
  if (!curSongInfo.value || curSongInfo.value.id !== params.id) {
    if (params.vip) {
      ElMessage.error("付费歌曲，请在网易云音乐播放");
      return;
    }

    // 无版权及vip不可播放
    if (params.license) {
      ElMessage.error("由于版权保护，您所在的地区暂时无法使用。");
      return;
    }

    homeStore.selectPlay([params]);
    homeStore.SET_PLAYLISTTIPS(true);
  } else {
    homeStore.SET_PLAYSTATUS(!isPlayed.value);
  }
};
</script>

<template>
  <div class="song">
    <el-skeleton :throttle="500" animated :loading="info.songInfo === null">
      <template #template>
        <div class="song-music">
          <div class="song-pic">
            <el-skeleton-item
              class="ske-img"
              variant="image"
              style="width: 400px"
            />
          </div>
          <div class="song-info">
            <el-skeleton-item variant="text" class="ske-name" />
            <el-skeleton-item variant="text" class="ske-name" />
            <el-skeleton-item
              variant="text"
              class="ske-name"
              style="height: 20px; width: 40%"
            />
            <el-skeleton-item
              variant="text"
              class="ske-name"
              style="height: 20px; width: 35%"
            />
            <el-skeleton-item
              variant="text"
              class="ske-name"
              style="height: 20px; width: 30%"
            />
          </div>
        </div>
        <el-skeleton :rows="5" animated style="margin-top: 20px" />
      </template>
      <template #default>
        <div class="song-music" v-if="info.songInfo !== null">
          <div class="song-pic">
            <el-image
              :src="info.songInfo.album.picUrl"
              fit="scale-down"
            ></el-image>
          </div>
          <div class="song-info">
            <h2 class="name">{{ info.songInfo.name }}</h2>
            <span class="mv" v-if="info.songInfo.mvId !== 0">
              <el-icon :size="19">
                <VideoCamera />
              </el-icon>
              <span>观看MV</span>
            </span>
            <p class="singer">
              <span
                v-for="item in info.songInfo.singer"
                :key="item.id"
                class="singer-item"
              >
                {{ item.name }}
              </span>
            </p>

            <div class="desc">
              <p>
                专辑：<span>{{ info.songInfo.album.name }}</span>
              </p>
              <p>
                发行时间：<span>{{ info.songInfo.publishTime }}</span>
              </p>
              <div class="info-bottom">
                <div class="song-oper">
                  <span
                    @click="plyaing(info.songInfo)"
                    :class="['play-btn', 'play-all', songDisable]"
                  >
                    <i :class="['iconfont', playFontIcon]"></i>
                    {{ info.songInfo.vip ? "VIP尊享" : "立即播放" }}
                  </span>
                  <span class="play-btn play-collect"
                    ><i class="iconfont icon-collect"></i> 收藏</span
                  >
                  <span class="play-btn play-comment"
                    ><i class="iconfont icon-comment"></i> 评论</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="song-comments">
          <div class="comments">
            <Comments :type="info.commentType" :sId="info.sId"></Comments>
          </div>
          <div class="song-right">
            <div class="simi-song">
              <h3 class="aside-title">相似歌曲</h3>
              <div class="simi-main">
                <div
                  class="simi-item"
                  v-for="simiItem in info.simiSong"
                  :key="simiItem.id"
                >
                  <div class="simi-info">
                    <router-link class="simi-name" :to="`/song/${simiItem.id}`">
                      {{ simiItem.name }}
                    </router-link>
                    <div class="simi-author">
                      <router-link
                        :to="{ path: '/singer', query: { id: author.id } }"
                        class="song-author"
                        v-for="(author, k) in simiItem.singer"
                        :key="author.name"
                        >{{
                          k !== 0 ? " / " + author.name : author.name
                        }}</router-link
                      >
                    </div>
                  </div>
                  <div class="simi-song-status">
                    <i v-if="simiItem.vip" class="iconfont icon-vip"></i>
                    <!-- <i
                    v-else
                    @click="plyaing(simiItem)"
                    :class="['iconfont', playSimiIcon(simiItem)]"
                  ></i> -->
                    <i class="iconfont icon-add" title="添加到列表"></i>
                  </div>
                </div>
              </div>
            </div>
            <div class="sidebar-box">
              <h3 class="aside-title">包含这首歌的歌单</h3>
              <div class="simi-main">
                <router-link
                  class="playlist-item"
                  :to="{ path: '/playlist/detail', query: { id: item.id } }"
                  v-for="item in info.playlists"
                  :key="item.id"
                >
                  <el-image :src="item.coverImgUrl">
                    <!-- <div slot="placeholder" class="image-slot">
                      <i class="iconfont icon-placeholder"></i>
                    </div> -->
                  </el-image>
                  <div class="playlist-info">
                    <div class="playlist-name">{{ item.name }}</div>
                    <div class="playlist-author">
                      By.
                      <router-link
                        :to="{
                          path: '/user',
                          query: { id: item.creator.userId },
                        }"
                        >{{ item.creator.nickname }}</router-link
                      >
                    </div>
                  </div>
                </router-link>
              </div>
            </div>
          </div>
        </div>
      </template>
    </el-skeleton>
  </div>
</template>

<style scoped lang="scss">
.song {
  .song-music {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    position: relative;
    overflow: hidden;

    .song-pic,
    & .ske-img {
      flex-shrink: 0;
      margin-right: 15px;
    }

    .el-image,
    .ske-img {
      width: 100%;
      height: 350px;
      border-radius: var(--el-border-radius-round);
    }

    .song-info {
      display: flex;
      flex-flow: column wrap;
      justify-content: space-evenly;
      margin-left: 10px;
      flex-shrink: 0;
      flex-grow: 1;
      z-index: 2;
      > .name {
        font-size: var(--el-font-size-extra-large);
        width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; //不换行
      }

      > p {
        color: var(--el-text-color-primary);
        font-size: var(--el-font-size-medium);
        width: 400px;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: wrap; //不换行
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .mv {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 90px;
        font-size: var(--el-font-size-base);
        cursor: pointer;
        color: var(--el-text-color-regular);

        &:hover {
          color: var(--el-color-primary) !important;
        }

        .el-icon {
          margin-right: 8px;
          cursor: pointer;
        }
      }

      .singer-item:not(:nth-last-of-type(-n + 1))::after {
        content: " / ";
      }

      .desc {
        color: var(--el-text-color-regular);
        font-size: var(--el-font-size-small);

        span {
          color: var(--el-text-color-primary);
        }
      }

      .ske-name {
        margin-bottom: 20px;
        height: 30px;
        width: 50%;
      }
    }

    .info-bottom {
      margin-top: 5px;
    }
  }

  .song-oper {
    .play-btn {
      display: inline-block;
      line-height: 16px;
      align-items: center;
      border-radius: 50px;
      padding: 7px 15px;
      cursor: pointer;
      margin: 5px 15px 5px 0;
      background: var(--el-color-info-light-8);
    }

    .play-all {
      background: var(--el-color-primary);
      color: var(--el-bg-color) !important;

      i {
        color: var(--el-bg-color);
      }
    }

    .disable {
      background: var(--el-text-color-primary);
      cursor: not-allowed;
    }
  }

  .song-comments {
    display: flex;
    flex-flow: row;
    padding-top: 30px;

    .comments {
      flex: 3;
    }

    .song-right {
      flex: 1;
      margin: 10px 0px 0px 20px;
      border-radius: 6px;

      .aside-title {
        margin-top: 10px;
        position: relative;
        font-size: 16px;
        line-height: 24px;

        &::before {
          content: "";
          display: inline-block;
          width: 4px;
          height: 18px;
          margin: 3px 5px 0 0;
          border-radius: 2px;
          background: var(--el-color-primary);
          vertical-align: top;
        }
      }

      .simi-main {
        margin-top: 15px;
        box-shadow: 0 20px 27px rgb(0 0 0 / 5%);
        background-color: var(--el-bg-color);
        padding: 10px;

        &:last-child {
          padding-bottom: 0px;
        }
      }

      .simi-name {
        line-height: 20px;
        font-size: var(--el-font-size-base);
        color: var(--el-text-color-primary);
      }

      .simi-author {
        font-size: 0;

        a {
          font-size: 12px;
          color: var(--el-color-info-light-3);
        }
      }

      .simi-item {
        display: flex;
        border-bottom: 1px solid var(--el-bg-color-page);

        &:last-child {
          border: 0;
        }
      }

      .simi-info {
        flex: 1;
        padding-top: 5px;
      }

      .simi-song-status {
        line-height: 48px;

        i {
          margin-left: 10px;
          cursor: pointer;
        }
      }

      .sidebar-box {
        margin-top: 50px;

        .el-image {
          width: 60px;
          height: 60px;
          border-radius: 4px;
          overflow: hidden;
        }

        .playlist-item {
          display: flex;
          padding-bottom: 15px;
        }

        .playlist-info {
          flex: 1;
          padding-left: 10px;
        }

        .playlist-name {
          width: 100%;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          word-break: break-all;
          cursor: pointer;
          font-size: var(--el-font-size-base);
          color: var(--el-text-color-primary);
        }

        .playlist-author {
          height: 20px;
          line-height: 20px;
          margin-top: 20px;
          font-size: 12px;
          color: #999;

          a {
            color: #666;
          }
        }
      }
    }
  }
}
</style>
